<template>

	<div class="act-prize-list">

		<div class="table-opt-handle" v-if="!max || max > productList.length">
			<el-button link type="primary" @click="select">
				<i class="fc-icon icon-add"></i> 添加
			</el-button>
			<productSelect ref="productSelect"></productSelect>
		</div>

		<sc-form-table ref="table" hideAdd v-model="productList" :addTemplate="addTemplate" drag-sort
			placeholder="暂无数据">
			<el-table-column class-name="custom-cell" label="&nbsp;商品信息">
				<template #default="scope">
					<el-descriptions :column="1" border size="small">
						<el-descriptions-item label="商品图片">
							<el-image style="max-width: 80px; max-height: 80px;" preview-teleported hide-on-click-modal
								:src="scope.row.image" :preview-src-list="[scope.row.image]" show-progress fit="contain"
								:z-index="19900501" />
						</el-descriptions-item>
						<el-descriptions-item label="标题">
							<el-input placeholder="标题" size="small" v-model="scope.row.title">
							</el-input>
						</el-descriptions-item>
						<el-descriptions-item label="金额">
							88<el-input placeholder="折扣" size="small" v-model.number="scope.row.stock">
							</el-input>
						</el-descriptions-item>
						<el-descriptions-item label="积分">
							300<el-input placeholder="折扣" size="small" v-model.number="scope.row.stock">
							</el-input>
						</el-descriptions-item>
						<el-descriptions-item label="库存">
							<el-input type="number" placeholder="库存" size="small" v-model.number="scope.row.stock">
							</el-input>
						</el-descriptions-item>
					</el-descriptions>
				</template>
			</el-table-column>
		</sc-form-table>
	</div>
</template>

<script>
	import productSelect from '@/views/shop/adSpace/select/product.vue'

	import {
		defineComponent
	} from 'vue';
	import {
		copy
	} from '@form-create/utils/lib/extend';

	export default defineComponent({
		name: 'productList',
		emits: ['update:modelValue', 'change'],
		components: {
			productSelect,
		},
		computed: {
			productList: {
				get() {
					return this.modelValue
				},
				set(val) {
					this.$emit('update:modelValue', val);
				}
			},
		},
		props: {
			modelValue: [Array, Object],
			max: {
				type: Number,
				default: 8
			},
			size: String,
		},
		inject: ['designer'],
		data() {
			return {
				addTemplate: {
					title: '谢谢参与',
					id: 0,
					image: 'https://cdn.jisuapp.cn/zhichi_frontend/static/webapp/images/phone-free.png',
					rate: 0,
					stock: 999999,
					dailyLimit: 0
				}
			};
		},
		methods: {
			addEmpty() {
				this.$refs.table.rowAdd({
					title: '谢谢参与',
					id: 0,
					image: 'https://cdn.jisuapp.cn/zhichi_frontend/static/webapp/images/phone-free.png',
					rate: 0,
					stock: 999999,
					dailyLimit: 0
				})
			},
			select() {
				this.$refs.productSelect.toggleMenu((e) => {
					this.$refs.table.rowAdd({
						title: e.product_title,
						id: e.skus[0].id,
						image: e.product_image,
						rate: 0,
						stock: e.skus[0].sku_stock,
						dailyLimit: 0
					});
				});
			},
		}
	});
</script>

<style scoped>
	.act-prize-list {
		width: 100%;
	}
</style>
